import {create} from "zustand";
import {immer} from 'zustand/middleware/immer'
import {devtools, persist} from 'zustand/middleware'
import type {useSettersStoreType, useGlobalStoreType} from "@/typings/store";


const initialState: useGlobalStoreType.stateType = {
    // antd 组件尺寸 ("small" | "middle" | "large")
    componentSize: "middle",
    // antd 紧凑型主题
    compactAlgorithm: false,
    // antd 边框圆角
    borderRadius: 6,
    // 当前页面是否全屏
    maximize: false,
    // 主题颜色
    primary: '#1677ff',
    // 夜间模式
    isDark: false,
    // antd 组件喝彩反馈效果
    isHappy: true,
    //菜单手风琴模式
    accordion: true,
    // 是否展示面包屑导航
    breadcrumb: true,
    // 是否展示面包屑导航图标
    breadcrumbIcon: true,
    // 是否展示标签导航
    tabs: true,
    // 是否展示标签导航图标
    tabsIcon: true,
    // 标签是否支持拖拽
    tabsDrag: true,
}

const actions = (set: useSettersStoreType<useGlobalStoreType.storeType>) => {
    const setGlobalState = <T extends keyof useGlobalStoreType.stateType>(payload: ObjToKeyValUnion<useGlobalStoreType.stateType>) => {
        set((state: useGlobalStoreType.stateType) => {
            state[payload.key as T] = payload.value as useGlobalStoreType.stateType[T]
        })
    }

    return {setGlobalState}
}

const storage = {name: 'global-storage'}
export const useGlobalStore = create<useGlobalStoreType.storeType>()(devtools(persist(immer((set) => ({
    ...initialState,
    ...actions(set)
})), storage), storage))
